<template>
	<view class="main">
		<navbar :title="$t('pay.TOP')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
			<view class="record" slot="right" @click="navTo('/pages/pay/record')">
				{{$t("common.record")}}
			</view>
		 </navbar>
		 <view class="balance">
		 	<view class="sum">
		 		{{ $currency }}{{userInfo.money}}
		 	</view>
			<view class="lance">
				{{ $t("pay.lance")}}
			</view>
		 </view>
		 <view class="select">
		 	<view class="yuan1">
		 	</view>
			<view class="select1">
				<view class="yuan2">
				</view>
				<view class="select2">
					{{ $t("pay.select")}}
				</view>
			</view>
		 </view>
		 <view class="money">
		 	<view class="money1" v-for="(item, index) in list" :class="{money2:index == activeIndex}" @click="changePay(index, item)"
			:key="item.price">
		 		<view style="margin-top:36rpx;font-size:40rpx;">
					{{ $currency}}{{item.price}}
				</view>
				<view style="margin-top:16rpx;color:#AAAAAA;" v-if="item.rate && item.rate != '0'">
					{{$t('new.extragifts')}}
				</view>
				<view style="margin-top:8rpx;color:#AAAAAA;" v-if="item.rate && item.rate != '0'">
					+{{ $currency}}{{item.givemoney}}
				</view>
				<view class="extra-rate" :class="{'rate-active':index == activeIndex}" v-if="item.rate && item.rate != '0'">
					+{{item.rate}}%
				</view>
		 	</view>
		 </view>
		 <view class="msg">
		 	<!-- <view class="">
		 		{{ $t("pay.fill")}}
		 	</view> -->
			<input type="number" :placeholder="`Fill in the amount between ${$currency}500 - 100000`" @input="checkPrice" v-model="value" @focus="changePay(7)" @blur="changePay(7)"/>
			<view class="input-rate" v-if="rate && rate != '0'">
				+{{rate}}%
			</view>
		 </view>
		 <view style="color:#AAA;text-align:center;margin-top: 20rpx;" v-if="rate && rate != '0'">
			{{$t('new.extragifts')}} +{{ $currency}}{{(value*rate/100).toFixed(0)}}
		 </view>
		 <view class="msg1">
		 	<view class="msg2" @click="change(item)" v-for="item in tip" :class="{msg3:item.id==nums}">
		 		{{item.name}}
		 	</view>
		 </view>
		 <view class="box3">
		 	<view class="line1">
		 		
		 	</view>
			<view class="warm">
				Warm reminder
			</view>
			<view class="line2">
				
			</view>
		 </view>
		 <view class="the">
		 	{{ $t("pay.the")}}
			<view class="for" @click="goService">
				{{ $t("pay.questions1")}}  <text>{{ $t("pay.questions2")}}</text> {{ $t("pay.questions3")}}
			</view>
		 </view>
		 <view style="width:670rpx;height:90rpx;position:fixed;bottom: 30rpx;left:40rpx;">
			<overbtn :btnText="$t('pay.TOP')" @btnAction="onTopUpClick" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
		</view>
	</view>
</template>

<script>
	var appsFlyer = uni.requireNativePlugin("sn-appsflyer");
	import {
		rechargechannel,
		topup,
		amountlist
	} from '@/api/money.js'
	export default{
		data(){
			return{
				list:[],
				price: '',
				value: '',
				gift: '',
				rate: '',
				activeIndex:0,
				nums:6,
				message:'',
				tip:[]
			}
		},
		onLoad() {
			this.loadChannel();
			this.loadList();
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			},
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			}
		},
		methods:{
			async loadChannel() {
				let result = await rechargechannel();
				console.log(result,'tip')
				this.tip = result;
				this.nums = this.tip[0].id;
			},
			async loadList() {
				let result = await amountlist();
				this.list = result;
				console.log(result,'list')
				this.price = this.list[0].price
			},
			changePay(num, item) {
				this.activeIndex = num
				this.$nextTick(() => {
					if (num == 7) {
						this.price = this.value;
					} else {
						this.value = item.price;
						this.price = item.price;
						this.gift = item.givemoney;
						this.rate = item.rate;
					}
					this.$forceUpdate();
				})
			},
			change(item){
				this.nums= item.id
			},
			search(){
				for(var i=1; i<this.message.length; i++ ){
					if(!('0123456789'.indexOf(this.message.substr(i,1))>-1)){
						alert('请输入数字')
					}
				}
			},
			async onTopUpClick() {
				if (!this.price || !this.nums) {
					return 
				}
				uni.showLoading({
				});
				let result = await topup({
					price: this.price.replace('.',''),
					channel_id: this.nums
				})
				if (result.payurl) {
					try {
						appsFlyer.logEvent({
								eventName: "af_pay_add",
								eventValues: {
									'af_content_type': 'topup',
								}, // 事件数据
							},
							(e) => {
							}
						);
					} catch (error) {
					}
					uni.navigateTo({
						url: `../pay/topupcenter?imurl=${encodeURIComponent(result.payurl)}`
					})
				}
				uni.hideLoading();
			},
			goService() {
				const item = this.systemInfo.service_url;
				// type 1内链 2外链 3 调起whatsapp
				if (item.indexOf('http') > -1) {
					// #ifdef APP-PLUS
					this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					// #endif
					// #ifndef APP-PLUS
					if (item.indexOf('t.me') > -1 || item.indexOf('wa.me') > -1) {
						window.open(item)
					} else {
						this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					}
					// #endif
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
			checkPrice(val) {
				let price = val.detail.value;
				if (price.indexOf('.') > -1 && price != '') {
					price = parseInt(price);
				}
				let rate;
				for(let i of this.list) {
					if (price >= Number(i.price)) {
						rate = i.rate;
					}
				}
				this.$nextTick(() => {
					this.price = price;
					this.value = price;
					this.rate = rate;
				})
			}
		}
			
				
			
		
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 180rpx;
		.record {
			color:#fff;
			display: flex;
			justify-content: center;
			position: absolute;
			right: 34rpx;
			width: 120rpx;
			height: 38rpx;
		}
	}
	.balance{
		margin: 40rpx 30rpx 0rpx;
		width: 690rpx;
		height:270rpx;
		background-image:url(../../static/image/pay/beijing.png);
		background-size: 100%;
		font-weight: 400;
		color: #FFFFFF;
		overflow: hidden;
		.sum{
			font-size: 90rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			margin-top: 74rpx;
			margin-left: 69rpx;
			line-height: 65rpx;
		}
		.lance{
			font-size: 32rpx;
			font-family: Rubik;
			margin-top: 35rpx;
			margin-left: 69rpx;
			line-height: 22rpx;
		}
	}
	
	.select{
		.yuan1{
			margin-top: 50rpx;
			margin-left: 66rpx;
			width: 16rpx;
			height: 16rpx;
			background: $u-type-primary;
			border-radius: 50%;
		}
		.select1{
			display: flex;
			.yuan2{margin-left: 40rpx;
				width: 30rpx;
				height: 30rpx;
				background: $u-type-primary;
				border-radius: 50%;
			}
				
			.select2{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 500;
				color: #0F0F0E;
				margin-top: -12rpx;
				margin-left: -6rpx;
			}
		}
	}
	
	.money{
		overflow: hidden;
		margin: 0 40rpx;
		margin-top: 3rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.money1{
			margin: 40rpx 0 0 0;
			width: 210rpx;
			padding-bottom: 40rpx;
			background: #fff;
			border: 2rpx solid #ECECEC;
			border-radius: 10rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			border: 1rpx solid $u-type-primary;
			position: relative;
			.extra-rate {
				width: 110rpx;
				height: 44rpx;
				border-radius: 20rpx 20rpx 20rpx 0;
				background: #fff;
				color: $u-type-primary!important;
				position: absolute;
				font-size: 28rpx;
				line-height: 44rpx;
				top: -20rpx;
				left: -2rpx;
				border: 2rpx solid $u-type-primary;
			}
			.rate-active {
				color: #fff!important;
				left: -4rpx;
				background: linear-gradient(90deg, #F21220 0%, $u-type-primary 100%);
			}
		}
		.money2{
			// background-size: 84rpx 71rpx;
			// background-image: url(../../static/image/pay/xuanzhong.png) ;
			// background-repeat: no-repeat;
			// background: #FFFDF4;
			border: 4rpx solid $u-type-primary;
			color: $u-type-primary;
			background: #FFF8F2;
			background-blend-mode:multiply;
			view {
				color: $u-type-primary!important;
			}
		}
		
		
	}
	
	.msg{
		display: flex;
		align-items: center;
		margin: 70rpx  40rpx 0;
		width: 670rpx;
		height: 90rpx;
		background: #ECECEC;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Rubik;
		font-weight: 300;
		text-align: center;
		position: relative;
		line-height: 90rpx;
		input {
			flex:1;
		}
		.input-rate {
			width: 110rpx;
			height: 44rpx;
			border-radius: 20rpx 20rpx 0 20rpx;
			color: #fff!important;
			background: linear-gradient(90deg, #F21220 0%, $u-type-primary 100%);
			position: absolute;
			font-size: 28rpx;
			line-height: 44rpx;
			top: -20rpx;
			right: 0rpx;
			border: 2rpx solid $u-type-primary;
		}
	}
	
	.msg1{
		display: flex;
		flex-wrap: wrap;
		width: 670rpx;
		height: 300rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		margin: 0 40rpx;
		margin-top: 70rpx;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #65676B;
		text-align: center;
		line-height:90rpx;
		.msg2{
			margin-top: 40rpx;
			margin-left: 40rpx;
			width: 270rpx;
			height: 90rpx;
			background: #ECECEC;
			border-radius: 10rpx;	
		}
		.msg2:nth-child(2){
			margin-left: 50rpx;
		}
		.msg3{
			margin-top: 40rpx;
			margin-left: 40rpx;
			width: 270rpx;
			height: 90rpx;
			background: #0F0F0E;
			color: $u-type-primary;
			border-radius: 10rpx;
		}
		.msg3:nth-child(2){
			margin-left: 50rpx;
			
		}
	}
	
	 .box3{
		 overflow: hidden;
		 margin-top: 100rpx;
		 margin-left: 136rpx;
		 display: flex;
		 .line1{
			 width: 120rpx;
			 height: 2rpx;
			 background: #AAAAAA;
			 margin-right: 20rpx;
			 margin-top: 14rpx;
		 }
		 .warm{
			 font-size: 28rpx;
			 font-family: Rubik;
			 font-weight: 400;
			 color: #AAAAAA;
		 }
		 .line2{
		 	  width: 120rpx;
		 	  height: 2rpx;
		 	  background: #AAAAAA;
			  margin-left: 20rpx;
			  margin-top: 14rpx;
		 }
		 
	 }
	 .the{
		 margin: 60rpx 40rpx 0;
		 font-size: 32rpx;
		 font-family: Rubik;
		 font-weight: 400;
		 color: #0F0F0E;
		 .for{
			margin-top: 54rpx;
			 text{
				color:#2399FD;
				margin-left: 10rpx;
				margin-right: 10rpx;
				text-decoration: underline  #2399FD;
			}
		 }
		 .yellow{
			 margin-top: 95rpx;
			 font-size: 30rpx;
			background: $u-type-primary;
			 border-radius: 10rpx;
			 width: 670rpx;
			 height: 90rpx;
			 text-align: center;
			 line-height: 90rpx;
		 }
	 }
</style>
